<template>
	<view>
		<view class="mainView">
			<view class="end">你要每天都开心哦</view>
			<view class="joke">
				{{joke}}
			</view>
			<button class="button" @click="updateJoke">再来一条</button>
		</view>
		<view class="safeView"></view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				joke:''
			}
		},
		onLoad(){
			const that=this;
			that.updateJoke();
		},
		methods:{
			updateJoke(){
				const that=this;
				wx.showLoading();
				wx.request({
					url:that.myConfig.hostUrl+'/api/joke.php',
					success:function(res){
						that.joke=res.data.joke;
						wx.hideLoading();
					}
				});
			}
		}
	}
</script>

<style scoped>
	.mainView{
		margin: 25rpx;
	}
	.joke{
		width: 500rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		padding: 50rpx;
		background:-webkit-linear-gradient(40deg, #ffffff, #FFead8, #ffffff);
		border-radius: 50rpx;
		box-shadow: 0 0 5rpx 0 #666666;
		color: #888888;
	}
	.button{
		width: 60%;
		margin-top: 20rpx;
		background:-webkit-linear-gradient(40deg, #ffffff, #FFead8, #ffffff);
		color: #888888;
		font-weight: 800;
	}
</style>
